<template>
  <div>
    <!-- 顶部面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- card 卡片视图 -->
    <el-card class="box-card">
      <!-- 头部按钮部分 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="query"
            class="input-with-select"
            clearable
            @clear="clearSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchGoods"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="goToAddGood">添加商品</el-button>
        </el-col>
      </el-row>

      <!-- table区域 -->
      <el-table :data="tableData" style="width: 98%" border>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="500px"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
        <el-table-column label="创建时间" v-slot="slot" width="180px">
          <template>
            <span>{{slot.row.upd_time | dateFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-slot="slot" width="150px">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(slot.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteGood(slot.row)"></el-button>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { reqGoodsList, reqDeleteGood } from '../../api/index'
export default {
  data () {
    return {
      // 查询框的内容
      query: '',
      pagenum: 1,
      pagesize: 10,
      total: 10,
      // 表格数据
      tableData: [],
    }
  },
  methods: {
    // 获取商品列表的数据
    async getGoodList () {
      const result = await reqGoodsList(this.query, this.pagenum, this.pagesize)
      if (result.meta.status === 200) {
        this.tableData = result.data.goods
        this.total = result.data.total
      } else {
        this.$message.error(result.meta.msg);
      }
    },

    // 条数值的改变
    handleSizeChange (newSize) {
      this.pagesize = newSize
      this.getGoodList()
    },

    // 页码值的改变
    handleCurrentChange (newPage) {
      this.pagenum = newPage
      this.getGoodList()
    },

    // 点击搜索按钮搜索商品
    searchGoods () {
      this.getGoodList()
    },

    // 点击input的关闭按钮全局搜索列表
    clearSearch () {
      this.getGoodList()
    },

    // 跳转到添加商品的页面
    goToAddGood () {
      this.$router.history.push('/addgood')
    },

    // 编辑商品
    edit (row) {
      this.$router.push('/editgood/' + row.goods_id)
    },

    // 删除商品
    deleteGood (row) {
      console.log(row)
      this.$confirm('您确定要删除该商品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await reqDeleteGood(row.goods_id)
        if (result.meta.status === 200) {
          this.$message.success(result.meta.msg)
          this.getGoodList()
        } else {
          this.$message.error(result.meta.msg)
        }
      }).catch((err) => err)
    }
  },

  created () {
    this.getGoodList()
  },


}
</script>
<style lang="less" scoped>
.el-card {
  margin-top: 15px;

  .el-table {
    margin: 15px 0;
  }
}
</style>
/**
step 与 tab 栏之间的联动
step:
解析 :active —— 默认的选中项
<el-steps :active="与tabs绑定同一个动态的值" align-center>
  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
  <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps>

tabs:
v-model 需要与 tab-pane 中的其中一个值相同为默认选中，如果需要与step搭配使用，需要将 tab-pane 的name改为数值的0,1,2
<el-tabs v-model="与step绑定同一个动态的值" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
*/
